<script setup>
import { inject, onMounted, reactive } from 'vue'
import { getStyles } from './index'
const getNode = inject('getNode')
const nodeConfig = reactive({
  nodeData: null,
  styles: null,
  isInit: false
})
const size = reactive({
  width: 0,
  height: 0
})
const updateData = (nodeData) => {
  nodeConfig.styles = getStyles(nodeData)
  nodeConfig.nodeData = nodeData
  nodeConfig.isInit = true
}
onMounted(() => {
  const node = getNode()
  const { width, height } = node.size()
  size.width = width
  size.height = height
  updateData(node.getData())
  node.on('change:data', ({ current }) => {
    const { width, height } = node.size()
    size.width = width // 修改这里
    size.height = height // 修改这里
    updateData(current)
  })
})
</script>

<template>
  <div
    :style="nodeConfig.styles"
    class="overflow-hidden w-full h-full line-node"
    v-if="nodeConfig.isInit"
  >
    <svg :width="size.width" :height="size.height">
      <!-- Draw the diagonals -->
      <line
        :x1="0"
        :y1="0"
        v-if="
          nodeConfig.nodeData.diagonalType === 'MAJOR' ||
          nodeConfig.nodeData.diagonalType === 'BOTH'
        "
        :x2="size.width"
        :y2="size.height"
        :stroke="nodeConfig.nodeData.contentColor"
        :stroke-width="nodeConfig.nodeData.lineThickness"
      />
      <line
        v-if="
          nodeConfig.nodeData.diagonalType === 'BOTH' ||
          nodeConfig.nodeData.diagonalType === 'MINOR'
        "
        :x1="0"
        :y1="size.height"
        :x2="size.width"
        :y2="0"
        :stroke="nodeConfig.nodeData.contentColor"
        :stroke-width="nodeConfig.nodeData.lineThickness"
      />

      <!-- Draw the vertical line -->
      <line
        :x1="size.width * 0.5"
        :y1="0"
        :x2="size.width * 0.5"
        :y2="size.height"
        v-if="nodeConfig.nodeData.diagonalType === 'VERTICAL'"
        :stroke="nodeConfig.nodeData.contentColor"
        :stroke-width="nodeConfig.nodeData.lineThickness"
      />

      <!-- Draw the horizontal line -->
      <line
        :x1="0"
        :y1="size.height * 0.5"
        :x2="size.width"
        :y2="size.height * 0.5"
        v-if="nodeConfig.nodeData.diagonalType === 'HORIZONTAL'"
        :stroke="nodeConfig.nodeData.contentColor"
        :stroke-width="nodeConfig.nodeData.lineThickness"
      />
    </svg>
  </div>
</template>
